import React from 'react';
import { Image, Text, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import style from './PlanGuideSteps.module.scss'
const STEPS_CONFIG = [
  { icon: Images.managePlan.icon_home_step1, title: '3分钟专业测评', desc: '采用斯坦福大学头面痛中心、浙江大学智能测评体系，通过3大健康维度，全面评估你的头痛情况' },
  { icon: Images.managePlan.icon_home_step2, title: '精准定制方案', desc: '找到适合你的头痛管理方案：医学营养、生活方式、认知行为疗法等，有效降低头痛发作频率和强度' },
  { icon: Images.managePlan.icon_home_step3, title: '每日指导', desc: '根据定制方案，进行每日练习、营养补充、科普学习等，并获得专属疼痛管理师指导和反馈' },
  { icon: Images.managePlan.icon_home_step4, title: '进展分析和疗效报告', desc: '定期生成你的专属进展分析和疗效报告，及时提供反馈和指导，科学管理，远离头痛' },
]
const PlanGuideSteps = () => (
  <View className={style.container}>
    <View className={style.titleContainer}>
      <View className={style.line} />
      <Text className={style.title}>四步开启，告别头痛困扰</Text>
    </View>
    <View className={style.stepContainer}>
      {STEPS_CONFIG.map((item, index) => {
        const { icon, title, desc } = item
        const isLast = index === STEPS_CONFIG.length - 1
        return (
          <View className={style.item} key={`${index}`}>
            <View className={style.left}>
              <Image src={icon} className={style.icon} />
              {!isLast && <View className={style.stepLine} />}
            </View>
            <View className={style.right}>
              <Text className={style.stepText}>{`第${index + 1}步`}</Text>
              <Text className={style.titleText}>{title}</Text>
              <Text className={style.descText}>{desc}</Text>
            </View>
          </View>
        )
      })}
    </View>
    <Image src={Images.managePlan.icon_home_guide_down} className={style.arrow} />
  </View>
)

export default PlanGuideSteps
